{% if faqs.links.size > 0 %} 
  <div class="pt-md-6">
    <div class="h3 text-md-center mb-4 d-md-flex d-none invisible">$nbsp;</div>
    <div class="position-relative d-md-block d-none pe-4">
      <ul class="nav flex-column">
        {%- for faq_category in faqs.links -%}
          <li class="nav-item px-0">
            <a
              id="as-link-{{ section.id }}-{{ faq_category.handle }}-pc"
              data-target-id="as-{{ section.id }}-{{ forloop.index0 }}-{{ faq_category.handle }}"
              href="#{{ faq_category.handle }}"
              class="as-nav-link-pc menu-item nav-link d-block ps-3 py-2 text-wrap"
            >
              {{ faq_category.title }}
            </a>
          </li>
        {%- endfor -%}
      </ul>
      <div class="underline position-absolute h-100 start-0 top-0 bg-gray-400">
        <div class="as-high-line active-line bg-primary"></div>
      </div>
    </div>
    <div class="position-relative d-md-none d-block accordion ">
      <button
        class="as-accordion-button accordion-button collapsed px-3 py-3 fs-6 cursor-pointer bg-white border-bottom"
        data-bs-toggle="collapse"
        data-bs-target="#as-accordion-nav-mob-{{ section.id }}"
        aria-expanded="true"
      >
      </button>
      <div
        class="collapse position-absolute bg-white w-100 flatted-menu-mob"
        style="z-index:2"
        id="as-accordion-nav-mob-{{ section.id }}"
      >
        <ul class="as-nav nav flex-column py-2">
          {%- for faq_category in faqs.links -%}
            <li class="nav-item px-0">
              <a
                id="as-link-{{ section.id }}-{{ faq_category.handle }}-mob"
                href="#{{ faq_category.handle }}"
                data-text="{{ faq_category.title }}"
                data-target-id="as-{{ section.id }}-{{ forloop.index0 }}-{{ faq_category.handle }}"
                class="as-nav-link-mob menu-item nav-link d-block px-3 py-2 text-wrap"
              >
                {{ faq_category.title }}
              </a>
            </li>
          {%- endfor -%}
        </ul>
      </div>
    </div>
  </div>
{% endif %}
